<template>
    <div class="tableAll">
  
      <div class="tableMain">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="艺术家名称" width="180">
          </el-table-column>
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
  
      <el-dialog style="width: 1000px;height: 1000px;" title="艺术家信息" :visible.sync="zdydialog">
        <el-form :model="form">
          <el-form-item label="编号" width="80px">
            <el-input class="dialog_input" v-model="form.id" ></el-input>
          </el-form-item>
          <el-form-item label="姓名" width="80px">
            <el-input class="dialog_input" v-model="form.name" ></el-input>
          </el-form-item>
          <el-form-item label="日期" width="80px">
            <el-date-picker  v-model="form.date" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="地址" width="80px">
            <el-select class="dialog_input" v-model="form.address" placeholder="选择地址">
              <el-option label="凯迪拉克中心" value="凯迪拉克中心"></el-option>
              <el-option label="国家体育场" value="国家体育场"></el-option>
              <el-option label="OMNI SPACE" value="OMNI SPACE"></el-option>
              <el-option label="温州奥体中心主体育场" value="温州奥体中心主体育场"></el-option>
              <el-option label="沧州体育场" value="沧州体育场"></el-option>
              <el-option label="杭州黄龙体育中心体育馆" value="杭州黄龙体育中心体育馆"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
  
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script type="text/javascript">
  
  export default {
    name:"eltable",
    data() {
      return {
        tableData: [{
          id: '1001',
          name: 'Tom',
          date: '2019-11-26',
          address: '凯迪拉克中心',
        }, {
          id: '1002',
          name: 'Jerry',
          date: '2011-5-7',
          address: '国家体育场',
        }, {
          id: '1003',
          name: 'Spike',
          date: '1975-8-14',
          address: 'OMNI SPACE',
        },{
          id: '1004',
          name: 'Wacuy',
          date: '1994-1-9',
          address: '温州奥体中心主体育场',
        },{
          id: '1005',
          name: 'Obusa',
          date: '2004-6-6',
          address: '沧州体育场',
        },{
          id: '1006',
          name: 'Kasbius',
          date: '2024.6.1',
          address: '杭州黄龙体育中心体育馆',
        },],
        zdydialog: false,
  
        formLabelWidth: '80px',
        form: {},
        submitType : "",
      }
    },
    methods: {
      add() {
        this.form = {
          id: '',
          name: '',
          date: '',
          address: ''
        }
        this.submitType = "add";
        this.zdydialog = true
      },
      submit() {

        this.zdydialog = false
  
        if(this.submitType == "add"){
          this.form.date = reformat(this.form.date);
          this.tableData.push(this.form)
        }else{
  
        }
  
      },
      handleEdit(index, row) {
        // this.form = this.tableData[index]
        this.submitType = "update";
        this.form = row
        this.zdydialog = true
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      cancel() {
        this.zdydialog = false
      },
      
    },
  }
  </script>
  
  
  <style>
  .tableAll{
    align: 'center';
    width:900px;
    height: 300px;
  }
  .addArea{
    height: 40px;
    width: 900px;
  }
  .add_btn{
    float: right;
    margin-right: 20px;
  }
  .dialog_input{
    width:220px;
  }
  
  </style>
  
  